<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="豆豆">


    <meta name="subtitle" content="愿望是实现睡觉自由">


    <meta name="description" content="你来啦，这里是豆豆的小笔记！">


    <meta name="keywords" content="豆豆,学习,小笔记,睡觉自由">


<title>「Markdown_02」使用Mermaid绘图 | 豆豆的小笔记</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">豆豆的小笔记</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">归档</a>
                
                    <a class="menu-item" href="/category">分类</a>
                
                    <a class="menu-item" href="/tag">标签</a>
                
                    <a class="menu-item" href="/about">关于</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">豆豆的小笔记</a><a id="mobile-toggle-theme">·&nbsp;纯白</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; 菜单</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">归档</a>
                
                    <a class="menu-item" href="/category">分类</a>
                
                    <a class="menu-item" href="/tag">标签</a>
                
                    <a class="menu-item" href="/about">关于</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    
        <div class="post-toc">
    <div class="tocbot-list">
    </div>
    <div class="tocbot-list-menu">
        <a class="tocbot-toc-expand" onclick="expand_toc()">展开所有</a>
        <a onclick="go_top()">回到顶部</a>
        <a onclick="go_bottom()">到达底部</a>
    </div>
</div>

<script>
    document.ready(
        function () {
            tocbot.init({
                tocSelector: '.tocbot-list',
                contentSelector: '.post-content',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 1,
                orderedList: false,
                scrollSmooth: true,
            })
        }
    )

    function expand_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 6,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "collapse_toc()");
        b.innerHTML = "收起所有"
    }

    function collapse_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 1,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "expand_toc()");
        b.innerHTML = "展开所有"
    }

    function go_top() {
        window.scrollTo(0, 0);
    }

    function go_bottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

</script>
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">「Markdown_02」使用Mermaid绘图</h1>
            
                <div class="post-meta">
                    

                    
                        <span class="post-time">
                        时间： <a href="#">九月 5, 2016&nbsp;&nbsp;0:59:13</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </span>
                    
                    
                        <span class="post-category">
                    分类：
                            
                                <a href="/categories/Markdown/">Markdown</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <h1 id="安装Mermaid插件"><a href="#安装Mermaid插件" class="headerlink" title="安装Mermaid插件"></a>安装Mermaid插件</h1><ol>
<li>在<strong>Git Bash</strong>中输入<code>npm install --save hexo-filter-mermaid-diagrams</code>。</li>
<li>在Hexo的<code>config.yml</code>文件末尾添加以下内容：</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># mermaid chart</span></span><br><span class="line"><span class="attr">mermaid:</span> <span class="comment">## mermaid url https://github.com/knsv/mermaid</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span>  <span class="comment"># default true</span></span><br><span class="line">  <span class="attr">version:</span> <span class="string">"7.1.2"</span> <span class="comment"># default v7.1.2</span></span><br><span class="line">  <span class="attr">options:</span>  <span class="comment"># find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js</span></span><br><span class="line">    <span class="comment">#startOnload: true  // default true</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>在<code>YOURBLOG/themes/YOURTHEME/layout</code>文件夹中寻找<code>footer.ejs</code>文件，即你的博客下，你正在应用的主题中的<code>layout</code>文件夹中的<code>footer.ejs</code>文件。这个文件的名称可能与<code>footer</code>有出入，但是名称中应当包含<code>footer</code>。在文件末尾添加以下内容：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (theme.mermaid.enable) &#123; %&gt;</span><br><span class="line">  &lt;script src=<span class="string">'https://unpkg.com/mermaid@&lt;%= theme.mermaid.version %&gt;/dist/mermaid.min.js'</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">  &lt;script&gt;</span></span><br><span class="line"><span class="regexp">    if (window.mermaid) &#123;</span></span><br><span class="line"><span class="regexp">      mermaid.initialize(&#123;theme: 'forest'&#125;);</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>script&gt;</span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure>

<p>其中<code>forest</code>是绘图的主题，不同主题的色彩组合不同，共4种主题可以选择，分别是<code>default</code>、<code>dark</code>、<code>forest</code>、<code>neutral</code>。</p>
<ol start="4">
<li>到这里，我们就可以通过<strong>添加代码块</strong>的方式来绘制图形了，这里要注意，添加的代码块要注明代码类型为<code>mermaid</code>。</li>
</ol>
<h1 id="流程图"><a href="#流程图" class="headerlink" title="流程图"></a>流程图</h1><h2 id="三种基本线型"><a href="#三种基本线型" class="headerlink" title="三种基本线型"></a>三种基本线型</h2><h3 id="基本线型"><a href="#基本线型" class="headerlink" title="基本线型"></a>基本线型</h3><p>节点之间通过连线来连接，一共有<strong>三种</strong>线型：虚线<code>-.-</code>、实线<code>---</code>、粗实线<code>===</code>。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">graph TB</span><br><span class="line">A1 -.- A2</span><br><span class="line">B1 --- B2</span><br><span class="line">C1 === C2</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">graph TB
A1 -.- A2
B1 --- B2
C1 === C2</pre>

<h3 id="带箭头的线型"><a href="#带箭头的线型" class="headerlink" title="带箭头的线型"></a>带箭头的线型</h3><p>在基本线型符号串的右边加上<code>&gt;</code>符号，<strong>去掉左边第1个符号</strong>，使其<strong>仍然保持3个符号</strong>，就获得了带箭头的线型。其中虚线的第一个符号可以不去掉。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">graph TB</span><br><span class="line">A1 .-&gt; A2</span><br><span class="line">B1 --&gt; B2</span><br><span class="line">C1 ==&gt; C2</span><br></pre></td></tr></table></figure>

<pre class="mermaid">graph TB
A1 .-> A2
B1 --> B2
C1 ==> C2</pre>

<h3 id="带说明文字的线型"><a href="#带说明文字的线型" class="headerlink" title="带说明文字的线型"></a>带说明文字的线型</h3><p>基本线型和带箭头的线型可以进行组合，中间加上说明文字即可。其中，说明文字左侧的基本线型只取<strong>前两个</strong>符号。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">graph TB</span><br><span class="line">A1 -. 说明文字 -.- A2</span><br><span class="line">B1 -. 说明文字 .-&gt; B2</span><br><span class="line">C1 -- 说明文字 --- C2</span><br><span class="line">D1 -- 说明文字 --&gt; D2</span><br><span class="line">E1 == 说明文字 === E2</span><br><span class="line">F1 == 说明文字 ==&gt; F2</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">graph TB
A1 -. 说明文字 -.- A2
B1 -. 说明文字 .-> B2
C1 -- 说明文字 --- C2
D1 -- 说明文字 --> D2
E1 == 说明文字 === E2
F1 == 说明文字 ==> F2</pre>

<h2 id="四种图形走向"><a href="#四种图形走向" class="headerlink" title="四种图形走向"></a>四种图形走向</h2><p>所有节点之间的连线，都具有方向性，方向共以下四种：</p>
<ul>
<li>TB/TD：从上到下；</li>
<li>BT：从下到上；</li>
<li>LR：从左到右；</li>
<li>RL：从右到左。</li>
</ul>
<p>效果如下：</p>
<pre class="mermaid">graph TB
A1 --> A2</pre>

<pre class="mermaid">graph BT
A1 --> A2</pre>

<pre class="mermaid">graph LR
A1 --> A2</pre>

<pre class="mermaid">graph RL
A1 --> A2</pre>

<h2 id="五种节点形状"><a href="#五种节点形状" class="headerlink" title="五种节点形状"></a>五种节点形状</h2><p>节点默认是矩形的，但是可以通过语法来选定节点的形状，语法如下表。</p>
<table>
<thead>
<tr>
<th>语法</th>
<th>形状</th>
</tr>
</thead>
<tbody><tr>
<td>[ ]</td>
<td>矩形</td>
</tr>
<tr>
<td>( )</td>
<td>圆角矩形</td>
</tr>
<tr>
<td>(( ))</td>
<td>圆形</td>
</tr>
<tr>
<td>{ }</td>
<td>菱形</td>
</tr>
<tr>
<td>&gt; ]</td>
<td>非对称节点</td>
</tr>
</tbody></table>
<p>效果如下：</p>
<pre class="mermaid">graph LR
A[A] --- B(B)
B --- C((C))
C --- D{D}
D --- E>E]</pre>

<h2 id="子图形"><a href="#子图形" class="headerlink" title="子图形"></a>子图形</h2><p>子图形可以被嵌入图形中，以<code>subgraph</code>开始，以<code>end</code>结束。另外，子图形<strong>必须提供标题</strong>。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">graph TB</span><br><span class="line">A--&gt;D</span><br><span class="line">A--&gt;F</span><br><span class="line">subgraph 图三</span><br><span class="line">C--&gt;D</span><br><span class="line">C--&gt;G((G))</span><br><span class="line">end</span><br><span class="line">subgraph 图二</span><br><span class="line">A---B</span><br><span class="line">end</span><br><span class="line">subgraph 图一</span><br><span class="line">E-.-F</span><br><span class="line">end</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">graph TB
A-->D
A-->F
subgraph 图三
C-->D
C-->G((G))
end
subgraph 图二
A---B
end
subgraph 图一
E-.-F
end</pre>

<h1 id="时序图"><a href="#时序图" class="headerlink" title="时序图"></a>时序图</h1><h2 id="定义角色"><a href="#定义角色" class="headerlink" title="定义角色"></a>定义角色</h2><p>用<code>participant</code>来定义参与者，用<code>as</code>来增加角色的别名。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">participant A</span><br><span class="line">panticipant B as C</span><br></pre></td></tr></table></figure>

<p>需要注意：</p>
<ul>
<li>定义角色不是必须的，参与者<strong>按照出场先后顺序排列</strong>，如果要把某个角色排在前面，就要定义他。</li>
<li>定义语句不一定要在消息传递之前，放在中间或者后面都可以。</li>
</ul>
<h2 id="消息连线"><a href="#消息连线" class="headerlink" title="消息连线"></a>消息连线</h2><h3 id="基本线型-1"><a href="#基本线型-1" class="headerlink" title="基本线型"></a>基本线型</h3><p>用<code>-&gt;</code>表示实线，用<code>--&gt;</code>表示虚线。</p>
<h3 id="带箭头的线型-1"><a href="#带箭头的线型-1" class="headerlink" title="带箭头的线型"></a>带箭头的线型</h3><p>用<code>-&gt;&gt;</code>表示带箭头的实线，用<code>–-&gt;&gt;</code>表示带箭头的虚线。</p>
<h3 id="带终止符的线型"><a href="#带终止符的线型" class="headerlink" title="带终止符的线型"></a>带终止符的线型</h3><p>用<code>-&gt;&gt;</code>表示带终止符的实线，用<code>–-&gt;&gt;</code>表示带终止符的虚线。</p>
<h3 id="综合效果"><a href="#综合效果" class="headerlink" title="综合效果"></a>综合效果</h3><p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">sequenceDiagram</span><br><span class="line">participant A</span><br><span class="line">participant B</span><br><span class="line">A -&gt; B:实线</span><br><span class="line">B --&gt; A:虚线</span><br><span class="line">A -&gt;&gt; B:实线箭头</span><br><span class="line">B --&gt;&gt; A:虚线箭头</span><br><span class="line">A -x B:实线终止符</span><br><span class="line">B --x A:虚线终止符</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">sequenceDiagram
participant A
participant B
A -> B:实线
B --> A:虚线
A ->> B:实线箭头
B -->> A:虚线箭头
A -x B:实线终止符
B --x A:虚线终止符</pre>

<h2 id="角色内部任务"><a href="#角色内部任务" class="headerlink" title="角色内部任务"></a>角色内部任务</h2><p>角色本身不仅传递消息，自身还存在任务，需要告诉他<strong>开始处理</strong>及<strong>处理完</strong>自己的任务。开始处理用<code>activate</code>，处理完毕用<code>deactivate</code>。</p>
<p>多数情况下，都是角色在<strong>接收到消息时</strong>才会启动或者结束自身任务，因此有一个快捷的办法，<strong>在消息连线后面加上+/-</strong>，表示接收消息的角色这时候应该<strong>开始/结束</strong>自身任务处理。</p>
<p>另外，如果有多个启动和完成任务的指令，记住他们一定是从最内侧进行配对的。</p>
<p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">sequenceDiagram</span><br><span class="line">participant A</span><br><span class="line">participant B</span><br><span class="line">A -&gt;&gt;+ B:B启动任务1</span><br><span class="line">B --&gt;&gt; A:消息</span><br><span class="line">activate B</span><br><span class="line">B --&gt;&gt; A:上一句让B启动了任务2。</span><br><span class="line">A -&gt;&gt;- B:B结束了任务，只能匹配任务2</span><br><span class="line">B --x A:这里有个终止符</span><br><span class="line">deactivate B</span><br><span class="line">A -x B:上一句B结束了任务，只能匹配任务1</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">sequenceDiagram
participant A
participant B
A ->>+ B:B启动任务1
B -->> A:消息
activate B
B -->> A:上一句让B启动了任务2。
A ->>- B:B结束了任务，只能匹配任务2
B --x A:这里有个终止符
deactivate B
A -x B:上一句B结束了任务，只能匹配任务1</pre>



<h2 id="贴标签"><a href="#贴标签" class="headerlink" title="贴标签"></a>贴标签</h2><p>给角色贴上便签<code>Note</code>，便签的位置有角色的左边、右边或者上方，但是<strong>没有下方</strong>。</p>
<p>语法是<code>Note left of/right of/over A/B/A,B : Text</code>，要注意的是，只有<code>over</code>后面可以跟随多个对象。</p>
<p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">sequenceDiagram</span><br><span class="line">participant A</span><br><span class="line">participant B</span><br><span class="line">Note over A:A的标签</span><br><span class="line">A -&gt;&gt; B:消息</span><br><span class="line">Note left of A:A的标签</span><br><span class="line">Note right of B:B的标签</span><br><span class="line">B --&gt;&gt; A:消息</span><br><span class="line">Note over A,B:A、B的标签</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">sequenceDiagram
participant A
participant B
Note over A:A的标签
A ->> B:消息
Note left of A:A的标签
Note right of B:B的标签
B -->> A:消息
Note over A,B:A、B的标签</pre>

<h2 id="条件结构"><a href="#条件结构" class="headerlink" title="条件结构"></a>条件结构</h2><p>时序在处理的时候，肯定会遇上有条件执行的情况，它的语法如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">alt 可选语句说明</span><br><span class="line">...</span><br><span class="line">else</span><br><span class="line">...</span><br><span class="line">end</span><br></pre></td></tr></table></figure>

<p>其中的<code>alt</code>是<code>alternative</code>的缩写，即这有两组时序是二选一的，相当于<code>if-else</code>语句。如果没有<code>else</code>，那么用另外一个关键词<code>opt</code>，它是<code>optional</code>的缩写，语法如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">opt 条件说明</span><br><span class="line">end</span><br></pre></td></tr></table></figure>

<p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">sequenceDiagram</span><br><span class="line">participant A</span><br><span class="line">participant B</span><br><span class="line">A -&gt;&gt; B: 你好吗？</span><br><span class="line">alt 如果B很好</span><br><span class="line">B --&gt;&gt; A:我很好</span><br><span class="line">else</span><br><span class="line">B --&gt;&gt; A:我不好</span><br><span class="line">end</span><br><span class="line">B -&gt;&gt; A:你有空吗？咱看电影去。</span><br><span class="line">opt A有空</span><br><span class="line">A --&gt;&gt; B: 去吧</span><br><span class="line">end</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">sequenceDiagram
participant A
participant B
A ->> B: 你好吗？
alt 如果B很好
B -->> A:我很好
else
B -->> A:我不好
end
B ->> A:你有空吗？咱看电影去。
opt A有空
A -->> B: 去吧
end</pre>

<h2 id="循环结构"><a href="#循环结构" class="headerlink" title="循环结构"></a>循环结构</h2><p>把几个语句用<code>loop end</code>语句圈起来，这就是时序循环。语法如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">loop 循环语句说明</span><br><span class="line">...</span><br><span class="line">end</span><br></pre></td></tr></table></figure>

<p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">sequenceDiagram</span><br><span class="line">participant A</span><br><span class="line">participant B</span><br><span class="line">A -&gt;&gt; B: 有人在吗</span><br><span class="line">B -&gt;&gt; A: 在啊</span><br><span class="line">loop 这俩话痨</span><br><span class="line">A --&gt;&gt; B: 你好</span><br><span class="line">B --&gt;&gt; A: 你好</span><br><span class="line">end</span><br><span class="line">A -&gt;&gt; B: 我不玩了，只会说你好</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">sequenceDiagram
participant A
participant B
A ->> B: 有人在吗
B ->> A: 在啊
loop 这俩话痨
A -->> B: 你好
B -->> A: 你好
end
A ->> B: 我不玩了，只会说你好</pre>



<h1 id="甘特图"><a href="#甘特图" class="headerlink" title="甘特图"></a>甘特图</h1><h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><h3 id="时间及项目标题"><a href="#时间及项目标题" class="headerlink" title="时间及项目标题"></a>时间及项目标题</h3><ul>
<li>时间格式为<code>dateFormat YYYY-MM-DD</code>，定义图中坐标轴的时间格式，可供选择的字符串格式在<a href="http://momentjs.com/docs/#/parsing/string-format/" target="_blank" rel="noopener">这里</a>。</li>
<li>项目标题为<code>title &lt;project title&gt;</code>，项目的标题，中间可以用空格。</li>
</ul>
<h3 id="阶段"><a href="#阶段" class="headerlink" title="阶段"></a>阶段</h3><ul>
<li>阶段为<code>section &lt;phase name&gt;</code>,描述性字符串中间可以加空格。</li>
</ul>
<h3 id="活动"><a href="#活动" class="headerlink" title="活动"></a>活动</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">活动名</span>&gt;</span></span>:[重要等级],[完成状态],[激活状态],[活动的引用名],[开始时间/依赖],[结束时间/持续时间]</span><br></pre></td></tr></table></figure>

<ul>
<li>活动名：必须。用于描述活动的内容或性质，中间可以包括空格，但不可包含<code>:</code>，因为冒号被用作与后面各项的分隔符。</li>
<li>重要等级：非必须。如果非常重要，则取值<code>crit</code> ，可为空。</li>
<li>完成状态：非必须。如果已完成，则用<code>done</code>表示，可为空。</li>
<li>激活状态：非必须。如果已激活，则为<code>active</code>，可为空。</li>
<li>活动引用名：非必须。给当前活动指定引用名称，以便下方引用，名称中<strong>不能包含空格</strong>。</li>
<li>开始时间：非必须。可以取绝对时间或相对时间。相对时间用<code>after</code>关键字。表示在另外一个活动完成之后开始，如果没有指定，则<strong>默认为上个活动结束的时间</strong>。</li>
<li>结束时间/持续时间：必须。可以是绝对时间，前提是<strong>它的前面应该是绝对时间</strong>。也可以是持续时间。</li>
</ul>
<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">gantt</span><br><span class="line">dateFormat  YYYY-MM-DD</span><br><span class="line">title 软件开发甘特图</span><br><span class="line">section 设计</span><br><span class="line">  需求: done, des1, 2014-01-06, 2014-01-08</span><br><span class="line">  原型: active, des2, 2014-01-09, 3d</span><br><span class="line">  UI设计: des3, after des2, 5d</span><br><span class="line">  未来任务: des4, after des3, 5d</span><br><span class="line">section 开发</span><br><span class="line">  学习准备理解需求: crit, done, 2014-01-06, 24h</span><br><span class="line">  设计框架: crit, done, after des2, 2d</span><br><span class="line">  开发: crit, active, 3d</span><br><span class="line">  未来任务: crit, 5d</span><br><span class="line">  耍: 2d</span><br><span class="line">section 测试</span><br><span class="line">  功能测试: active, a1, after des3, 3d</span><br><span class="line">  压力测试: after a1, 20h</span><br><span class="line">  测试报告: 48h</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">gantt
dateFormat  YYYY-MM-DD
title 软件开发甘特图
section 设计
  需求: done, des1, 2014-01-06, 2014-01-08
  原型: active, des2, 2014-01-09, 3d
  UI设计: des3, after des2, 5d
  未来任务: des4, after des3, 5d
section 开发
  学习准备理解需求: crit, done, 2014-01-06, 24h
  设计框架: crit, done, after des2, 2d
  开发: crit, active, 3d
  未来任务: crit, 5d
  耍: 2d
section 测试
  功能测试: active, a1, after des3, 3d
  压力测试: after a1, 20h
  测试报告: 48h</pre>

<h1 id="类结构图"><a href="#类结构图" class="headerlink" title="类结构图"></a>类结构图</h1><p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">classDiagram</span><br><span class="line">Class01 <span class="xml"><span class="tag">&lt;<span class="name">|--</span> <span class="attr">AveryLongClass</span> <span class="attr">:</span> <span class="attr">Cool</span></span></span></span><br><span class="line"><span class="xml">Class03 *-- Class04</span></span><br><span class="line"><span class="xml">Class05 o-- Class06</span></span><br><span class="line"><span class="xml">Class07 .. Class08</span></span><br><span class="line"><span class="xml">Class09 --&gt;</span> C2 : Where am i?</span><br><span class="line">Class09 --* C3</span><br><span class="line">Class09 --|&gt; Class07</span><br><span class="line">Class07 : equals()</span><br><span class="line">Class07 : Object[] elementData</span><br><span class="line">Class01 : size()</span><br><span class="line">Class01 : int chimp</span><br><span class="line">Class01 : int gorilla</span><br><span class="line">Class08 <span class="xml"><span class="tag">&lt;<span class="name">--</span>&gt;</span></span> C2: Cool label</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<pre class="mermaid">classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label</pre>

        </div>

        
        <section class="post-tags">
            <div>
                <span>标签：</span>
                <span class="tag">
                    
                    
                        <a href="/tags/Markdown/"># Markdown</a>&nbsp;&nbsp;
                    
                        <a href="/tags/%E8%BF%9B%E9%98%B6%E8%AF%AD%E6%B3%95/"># 进阶语法</a>&nbsp;&nbsp;
                    
                        <a href="/tags/Mermaid/"># Mermaid</a>&nbsp;&nbsp;
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">返回</a>
                <span>· </span>
                <a href="/">主页</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2016/09/10/markdown-03/">「Markdown_03」使用Flowchart绘图</a>
            
            
            <a class="next" rel="next" href="/2016/09/01/markdown-01/">「Markdown_01」基本语法</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© 豆豆 | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>


    <script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
    <script>
      if (window.mermaid) {
        mermaid.initialize({theme: 'neutral'});
      }
    </script>
  
    </div>
</body>
</html>
